<template>
  <div>
    <button
      class="container"
      :class="[`type-${type}`, `size-${size}`]"
      :style="{ width: width }"
      @click="onClickListener"
    >
      <!-- :class="[`type-${type}`]"
      :class="['type'+type]"-->
      <slot></slot>
      <i :class="`iconfont ${icon}`" v-show="showIcon"></i>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "default",
    },
    size: {
      type: String,
      default: "default",
    },
    width: {
      default: "",
    },
    icon: {
      type: String,
      default: "icon-dianji",
    },
    showIcon: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onClickListener() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped>
</style>